@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd" v-cloak>
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>活动/会议/培训信息
            </div>
            <div class="demandadd_main">
                <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm1">
                    <el-form-item label="活动/会议/培训标题" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="活动/会议/培训封面图" prop="thumb">
                        <el-upload class="avatar-uploader" name="image"
                         :action="uploadImgUrl"
                        :show-file-list="false" 
                        :on-success="handleAvatarSuccessimg" 
                        :before-upload="beforeAvatarUpload">
                            <img v-if="form.thumb" :src="form.thumb" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <p style="color:red;margin-top:-10px;">建议尺寸(2:1、不大于2M)</p>
                    <el-form-item label="活动描述" prop="content">
                        <el-upload class="upload-demo" list-type="picture" name="image"
                                   :action="uploadImgUrl"
                                   :on-remove="handleRemove"
                                   :on-error='handleErro'
                                   :on-success="handleAvatarSuccess"
                                   {{--:file-list="form.images">--}}
                                    :file-list="img_arr">

                            <span class="addPicture">
                                <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                添加图片
                            </span>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                        </el-upload>
                        <el-input type="textarea" v-model="form.content" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训区域" prop="area">
                                <el-select placeholder="请选择" v-model="form.area">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训地址" prop="place">
                                <el-input v-model="form.place"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="报名费用（单位：人民币 元,0元即免费）" prop="cost">
                                <el-input v-model="form.cost"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="人数限制" prop="cost">
                                <el-input v-model="form.limit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训类型" prop="cid">
                                <el-cascader v-model="form.cid" :options="typeArr"></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="报名截止时间" prop="enroll_at">
                                <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.enroll_at">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训开始时间" prop="start_at">
                                <el-date-picker ormat="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.start_at">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训结束时间" prop="end_at">
                                <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.end_at">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="link_name">
                                <el-input v-model="form.link_name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="link_phone">
                                <el-input v-model="form.link_phone"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="link_department">
                                <el-input v-model="form.link_department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="link_position">
                                <el-input v-model="form.link_position"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-form>
            </div>
        </div>
        <button @click="submitForm('ruleForm','ruleForm1')" style="margin-bottom: 30px;">发布活动/会议/培训</button>
    </div>

    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">
                该活动发布供应商
            </div>
            <div class="recommendStoreList">
                <div class="recommendStore_header">
                    <img :src="rightHot.logo">
                </div>
                <div class="recommendStore_main">
                    <div class="nameS">
                        <span>@{{rightHot.store_name}}</span>
                        <img src="{{URL::asset('./img/store/storeColloct.svg')}}" v-if="rightHot.quality==2">
                        <img src="{{URL::asset('./img/store/shourm.svg')}}" v-if="rightHot.hot==2">
                    </div>
                    <p class="description">公司介绍: @{{rightHot.description}}</p>
                    <div class="text_box">
                        <span style="margin-right:5px">擅长领域: </span>
                        <div class="sc_box">
                            <p class="text" v-for="(item1,index1) in rightHot.cate_name" :key="index1" v-if="index1 < 2">@{{item1.name}}</p>
                            {{--<p class="text" v-if="rightHot.cate_name.length > 2">...</p>--}}
                        </div>
                    </div>
                    <div class="listContent_mes">
                            <span>
                                浏览
                                @{{rightHot.view}}
                            </span>
                        <span>
                                来电咨询
                                @{{rightHot.call}}
                            </span>
                        <span>
                                好评
                                @{{rightHot.credit}}%
                            </span>
                    </div>
                </div>
                <div class="recommendStore_button">
                    <button style="width: 115px;
    height: 36px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,165,49,1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #FFA531;" @click="window.location.href = '{{ route('home.store.store') }}?id='+rightHot.id">
                        进入店铺
                    </button>
                    <p class="area">地址:@{{rightHot.area}}</p>
                </div>
            </div>
            <a v-if="item.target!=2" style="display:block;width:100%" :href="item.link" v-for="item in imgData" target="_blank">
                <img :src="item.thumb" style="width:322px;height: 322px;" alt="...">
            </a>
            <a v-else style="display:block;width:100%" :href="item.link" v-for="item in imgData">
                <img :src="item.thumb" style="width:322px;height: 322px;" alt="...">
            </a>
        </div>
    </div>









    {{--<div class="demandadd_right">--}}
        {{--<div class="recommendStore">--}}
            {{--<div class="recommendStore_store">--}}
                {{--<img src="{{URL::asset('./img/icon/recommend.png')}}" alt="...">--}}
                {{--热门活动--}}
            {{--</div>--}}
            {{--<div class="stroreListDetails" v-for="(item,index) in rightHot">--}}
                {{--<img :src="item.thumb">--}}
                {{--<div>--}}
                    {{--<span>@{{item.title}}</span>--}}
                    {{--<div>--}}
                        {{--<p class="stroreListDetailsP">--}}
                            {{--<span>--}}
                                {{--<img src="{{URL::asset('./img/icon/eyered.png')}}">--}}
                                {{--@{{item.view}}--}}
                            {{--</span>--}}
                            {{--<span>--}}
                                {{--<img src="{{URL::asset('./img/icon/childred.png')}}">--}}
                                {{--@{{item.number}}--}}
                            {{--</span>--}}
                        {{--</p>--}}
                        {{--<p class="stroreListDetailsP">--}}
                            {{--<span>--}}
                                {{--<img src="{{URL::asset('./img/icon/monyred.png')}}">--}}
                                {{--@{{item.cost}}--}}
                            {{--</span>--}}
                            {{--<span>--}}
                                {{--<img src="{{URL::asset('./img/icon/timered.png')}}">--}}
                                {{--@{{item.start_at}}--}}
                            {{--</span>--}}
                        {{--</p>--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<button @click="window.location.href ='{{ route('home.activity.actDetails')}}?cateId='+item.id">报名</button>--}}
            {{--</div>--}}
            {{--<a v-if="item.target!=2" style="display:block;width:100%" :href="item.link" v-for="item in imgData" target="_blank">--}}
                {{--<img :src="item.thumb" style="width:322px;height: 322px;" alt="...">--}}
            {{--</a>--}}
            {{--<a v-else style="display:block;width:100%" :href="item.link" v-for="item in imgData">--}}
                {{--<img :src="item.thumb" style="width:322px;height: 322px;" alt="...">--}}
            {{--</a>--}}
        {{--</div>--}}
    {{--</div>--}}
</div>
<style>
    .el-cascader--mini {
        width: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    uploadUrl: UPLOAD_FILE,
                    uploadImgUrl: UPLOAD_IMG,
                    fileList: [],
                    imageUrl: '',
                    areaData: [],
                    imgData: [],
                    img_arr:[],
                    act_id:'',
                    form: {
                        title: '',
                        thumb: '',
                        content: '',
                        area: '',
                        place: '',
                        enroll_at: '',
                        cost: 0,
                        link_name: '',
                        link_phone: '',
                        link_department: '',
                        link_position: '',
                        cid: '',
                        limit:'',
                        images:[]
                    },
                    rightHot: [],
                    typeArr: [],
                    rules: {
                        title: [{
                            required: true,
                            message: '请填写相关信息',
                            trigger: 'blur'
                        }],
                        thumb: [{
                            required: true,
                            message: '请选择封面图',
                            trigger: 'change'
                        }],
                        content: [{
                            required: true,
                            message: '请填写活动描述',
                            trigger: 'blur'
                        }],
                        cid: [{
                            required: true,
                            message: '请选择类型',
                            trigger: 'change'
                        }],
                        area: [{
                            required: true,
                            message: '请选择区域',
                            trigger: 'change'
                        }],
                        place: [{
                            required: true,
                            message: '请填写地址',
                            trigger: 'blur'
                        }],
                        limit: [{
                            required: true,
                            message: '请输入人数限制',
                            trigger: 'blur'
                        }],
                        enroll_at: [{
                            required: true,
                            message: '请选择报名截止时间',
                            trigger: 'change'
                        }],
                        start_at: [{
                            required: true,
                            message: "请选择活动开始时间",
                            trigger: 'change'
                        }],
                        end_at: [{
                            required: true,
                            message: "请选择活动结束时间",
                            trigger: 'change'
                        }],
                        link_name: [{
                            required: true,
                            message: '请填写联系人',
                            trigger: 'blur'
                        }],
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        // link_department: [{
                        //     required: true,
                        //     message: '请填写部门',
                        //     trigger: 'change'
                        // }],
                        // link_position: [{
                        //     required: true,
                        //     message: '请填写职位',
                        //     trigger: 'change'
                        // }],
                        cost: [{
                            required: true,
                            validator: validatePrice2,
                            trigger: 'blur'
                        }],
                    }
                }
            },
            watch: {
                form: {
                    handler: (newVal, oldVal) => {
                        if (newVal.title.length > 25) {
                            newVal.title = newVal.title.substring(0, 25)
                        }
                    },
                    deep: true
                }
            },
            created() {

                this.form.link_name = JSON.parse(sessionStorage.getItem("HRuserDetails")).need_infos.company_name
                this.form.link_phone = JSON.parse(sessionStorage.getItem("HRuserDetails")).need_infos.mobile
                let id =  getQueryString("id")
                this.act_id = id || "";
                {{--if (getQueryString("id")) {--}}
                    {{--let data = {--}}
                        {{--act_id: this.act_id--}}
                    {{--}--}}
                    {{--apiAjax("{{ route('home.activity.actDetailsApi')}}", 'get', {id:id}, (res) => {--}}
                        {{--if (res.code == 0) {--}}
                            {{--this.form = res.data--}}
                            {{--this.form.cid = [res.data.cate_pid.id,res.data.cate_id.id]--}}
                            {{--this.form.images = res.data.images;--}}
                        {{--} else {--}}
                            {{----}}
                            {{--this.$message({--}}
                                {{--message: res.msg,--}}
                                {{--type: 'warning'--}}
                            {{--});--}}
                        {{--}--}}
                    {{--}, (erro) => {--}}

                    {{--});--}}
                {{--}--}}
                if(id){
                    apiAjax("{{ route('home.activity.actDetailsApi')}}", 'get', {id:id}, (res) => {
                        console.log(res.data)
                        if (res.code == 0) {
                            this.form = res.data;
                            res.data.images.map(item=>{
                                this.img_arr.push({url:item})
                            })
                            // this.form.images = res.data.images||[];
                            this.form.cid = [res.data.cate_pid.id,res.data.cate_id.id];
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                }



                {{--apiAjax("{{ route('home.activity.addRightHotActApi')}}", 'get', {--}}
                    {{--hot: 2,--}}
                {{--}, (res) => {--}}
                    {{--if (res.code == 0) {--}}
                        {{--this.rightHot = res.data;--}}
                    {{--} else {--}}
                        {{--this.$message({--}}
                            {{--message: res.msg,--}}
                            {{--type: 'warning'--}}
                        {{--});--}}
                    {{--}--}}
                {{--}, (erro) => {});--}}

                apiAjax("{{ route('home.activity.addRightHotActApi')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.rightHot = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });


                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 18
                }, (res) => {
                    if (res.code == 0) {
                        this.imgData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                apiAjax("{{ route('home.public.areas')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.areaData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                apiAjax("{{ route('home.public.category')}}", 'get', {
                    type: 1
                }, (res) => {
                    if (res.code == 0) {
                        this.typeArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleErro() {
                    this.$message.error('上传失败');
                },
                handleAvatarSuccessimg(res, file) {
                    this.form.thumb = file.response.data.path;
                },
                handleAvatarSuccess(res, file) {
                    this.form.images.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    // this.form.images = [];
                    // fileList.forEach(element => {
                    //     this.form.images.push(element.response.data.path)
                    // });
                    this.form.images.indexOf(file.url) !=-1? this.form.images.splice(this.form.images.indexOf(file.url),1) : '';
                },
                submitForm(formName, formName1) {
                    // let images=[];
                    // this.form.images.forEach(element => {
                    //     if(element.url){
                    //         images.push(element.url)
                    //     }else{
                    //         images.push(element)
                    //     }
                    // });
                    if (this.form.start_at < this.form.enroll_at) {
                        this.$message({
                            message: "报名截止时间不得大于活动开始时间",
                            type: 'warning'
                        });
                        return false;
                    }
                    if (this.form.start_at > this.form.end_at) {
                        this.$message({
                            message: "活动结束时间不得小于活动开始时间",
                            type: 'warning'
                        });
                        return false;
                    }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.$refs[formName1].validate((valid) => {
                                if (valid) {
                                    let data = {
                                        cate_pid: this.form.cid[0],
                                        cate_id: this.form.cid[1],
                                        id:this.form.id,
                                        // user_id: JSON.parse(sessionStorage.getItem("HRuserDetails")).id,
                                        title: this.form.title,
                                        thumb: this.form.thumb,
                                        content: this.form.content,
                                        area: this.form.area,
                                        place: this.form.place,
                                        enroll_at: this.form.enroll_at,
                                        start_at: this.form.start_at,
                                        end_at: this.form.end_at,
                                        cost: this.form.cost,
                                        limit: this.form.limit,
                                        link_name: this.form.link_name,
                                        link_phone: this.form.link_phone,
                                        // images: images.join(),
                                        images:this.form.images,
                                        // link_department: this.form.link_department,
                                        // link_position: this.form.link_position,
                                        act_id: this.act_id
                                    };
                                    apiAjax("{{ route('home.activity.actAddApi')}}", 'post', data, (res) => {
                                        if (res.code == 0) {
                                            this.$message({
                                                message: res.msg,
                                                type: 'success'
                                            });
                                            setTimeout(() => {
                                                window.location.href = "{{ route('home.suppliermy.supplierAct') }}";
                                            }, 3000);
                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: 'warning'
                                            });
                                        }
                                    }, (erro) => {

                                    });
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection